<template>
    <div id="header">
        <div id="header-container">
            <div class="left">
                <div id="logo">
                    <img v-if="logo" :src="logo" :width="38" :height="40" />
                    <span id="web-title">{{ title }}</span>
                </div>

                <div id="navigation" v-if="navigationText">
                    <router-link to="/home">
                        <i class="el-icon-s-home"></i>
                        <span class="navigation-text">首页</span>
                    </router-link>
                    <i class="el-icon-arrow-right"></i>
                    <span class="navigation-text"> {{ navigationText }} </span>
                </div>
            </div>

            <div
                class="right"
                v-if="navigationText || path === 'home' || path === 'login'"
            >
                <el-dropdown @command="handleCommand" style="cursor: pointer;" v-if="path !== 'login'">
                    <i class="el-icon-user"></i>
                    <el-dropdown-menu slot="dropdown">
                        <router-link to="/userinfo">
                            <el-dropdown-item>用户信息</el-dropdown-item>
                        </router-link>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <router-link to="/systemsetting" v-if="path !== 'login'">
                    <i class="el-icon-setting"></i>
                </router-link>
                <router-link to="" v-else>
                    <i class="el-icon-bell" @click="announcementConfirm"></i>
                    <!-- <el-switch
                        v-model="baseUrlName"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-value="local"
                        inactive-value="mock"
                        @change="switchBaseUrl"
                    ></el-switch> -->
                </router-link>
            </div>
            <div class="right" v-if="path === 'register'">
                <router-link to="/login" style="color: white"> &lt;&lt;返回登录</router-link>
            </div>
        </div>
    </div>
</template>

<script>
import logoImg from "@/assets/img/logo.svg"; //引入logo图片
import {logout} from "@/api/account.js"

export default {
    name: "Header",
    inject: ["reload"],
    data() {
        return {
            logo: logoImg,
            title: "基于雷达高分辨率精细化数值预报服务分系统",
            baseUrlName: 'mock'
        };
    },
    computed: {
        navigationText() {
            switch (this.path) {
                case "ADdashboard":
                    return "精细化小尺度大气扩散模式系统";
                case "global_deterministic":
                    return "全球确定性预报模式检验模块";
                case "grapes_region_determ":
                    return "GRAPES 高分辨率确定性预报模式检验模块";
                case "grapes_reps":
                    return "GRAPES 区域集合预报检验模块";
                case "userinfo":
                    return "用户信息";
                case "systemsetting":
                    return "系统设置";
                default:
                    return;
            }
        },
        path(){
            return this.$route.path.split("/")[1];
        }
    },
    methods: {
        handleCommand(command){
            if(command == 'logout'){
                logout().then(() => {
                    localStorage.removeItem('username');
                    this.$router.replace('/login');
                    this.$message.warning('退出登录成功')
                })
                return;
            }
        },
        announcementConfirm(){
            // 弹出确认框显示信息
            this.$alert(this.updates_info, '此次更新内容', {
                confirmButtonText: '确定',
                dangerouslyUseHTMLString: true
            });
        },
        switchBaseUrl(newValue){
            if(newValue == 'mock') this.$axios.defaults.baseURL = 'http://mock.ximu-studio.xyz/mock/5fb7bc3941bee6001cefc262/grapes'
            else this.$axios.defaults.baseURL = 'http://127.0.0.1:5000'
        }
    }
};
</script>

<style lang="scss" scoped>
#header {
    display: flex;
    justify-content: center;
    height: 50px;
    background-color: #238eba;
}
#header-container {
    // width: 1440px;
    width: 95%;
    display: inherit;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;

    .left {
        display: inherit;
        align-items: center;
        #logo {
            display: inherit;
            align-items: center;
            #web-title {
                padding: 0 10px;
                font-size: 22px;
                color: #ffffff;
                font-weight: 550;
                transition: font-size ease 0.3s;
                @media screen and (max-width: 960px) {
                    font-size: 16px;
                }
            }
        }
        #navigation {
            display: inherit;
            align-items: center;
            align-self: flex-end;
            padding: 7px 16px;
            i {
                color: #fff;
                font-size: 14px;
                padding: 0 3px;
            }
            .navigation-text {
                color: #fff;
                font-size: 14px;
            }
        }
    }

    .right {
        display: inherit;
        align-items: baseline;
        padding: 3px 0 0 0;
        i {
            padding: 0 10px;
            color: #fff;
            font-size: 18px;
        }
    }
}
</style>